<template>
    <div :class="isActive ? 'pr-button pr-button-active' : 'pr-button'">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    active: { 
        type: Boolean,
        default: false,
    },
});

const isActive = computed(() => props.active);
</script>

<style lang="less" scoped>
.pr-button {
    height: 38px;
    min-width: 143px;
    cursor: pointer;
    background-image: url('@/assets/image/btn_bg1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 38px;
    font-family: ASB;
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
}
.pr-button:hover {
    background-image: url('@/assets/image/btn_bg1_active.png');
}
.pr-button-active {
    background-image: url('@/assets/image/btn_bg1_active.png');  
}
</style>